<!--
 * @Author: lxw
 * @Date: 2021-02-09 14:51:01
 * @Description: 文章列表组件
 -->
<template>
  <div class="mt-10">
    <v-card v-for="item in list" :key="item._id" class="mb-5">
      <div class="item-container">
        <div class="cover">
          <v-img
            :src="item.images[0]"
            height="100%"
          />
        </div>
        <div class="right">
          <router-link class="title cur-p" tag="h2" :to="'/details/article/' + item._id">
            <v-chip
              label
              small
              class="mr-2"
              color="primary"
            >
              {{ formatText }}
            </v-chip>
            {{ item.title }}
          </router-link>
          <p class="grey--text desc">{{ item.desc }}</p>
          <footer class="action">
            <span>{{ item.author }}</span>
            <span class="grey--text">{{ item.dateFromNow }}</span>
          </footer>
        </div>
      </div>
    </v-card>

    <LoadMore :status="loadMoreStatus" @click="handleLoadMore" />
  </div>
</template>

<script>
import config from '@/utils/config'
import LoadMore from '@/components/LoadMore'

export default {
  name: 'ArticleList',
  components: { LoadMore },
  props: {
    category: {
      type: String,
      default: config.category[0],
      validator (val) {
        return config.category.includes(val)
      }
    },
    type: {
      type: String,
      default: config.type[0],
      validator (val) {
        return config.type.includes(val)
      }
    }
  },
  data () {
    return {
      page: 1,
      list: [],
      loadMoreStatus: 'before',
      typeText: [
        { title: '最新', key: 'All' },
        { title: '妹纸', key: 'Girl' },
        { title: 'Android', key: 'Android' },
        { title: 'Flutter', key: 'Flutter' },
        { title: 'iOS', key: 'iOS' },
        { title: '前端', key: 'frontend' },
        { title: '后端', key: 'backend' },
        { title: 'App', key: 'app' }
      ]
    }
  },
  computed: {
    formatText () {
      return this.typeText.find(item => item.key === this.type).title
    }
  },
  created () {
    this.getData()
  },
  methods: {
    async getData () {
      this.loadMoreStatus = 'loading'
      const { data, page_count } = await this.$apis.queryListData({
        category: this.category,
        type: this.type,
        page: this.page,
        count: 20
      })
      const _data = data.map(item => {
        item.dateFromNow = this.$dayjs(item.createdAt).fromNow()
        return item
      })
      this.list = [...this.list, ..._data]
      this.loadMoreStatus = page_count === this.page ? 'noMore' : 'before'
    },
    handleLoadMore () {
      this.page++
      this.getData()
    }
  }
}
</script>

<style scoped lang="scss">
.item-container {
  @include flex;
  height: 155px;
  .cover {
    width: 233px;
    height: 100%;
  }

  .right {
    @include flex(space-between, stretch, column);
    flex: 1;
    width: 100%;
    padding: 10px 16px;
    box-sizing: border-box;
    overflow: hidden;

    .title {
      @include text-overflow;
      font-size: 18px !important;
      .v-chip {
        float: left;
        margin-top: 3px;
      }
    }
    .desc {
      @include text-overflow(2);
      flex: 1;
      margin-top: 5px;
    }
    .action {
      @include flex(space-between)
    }
  }
}
</style>
